<template>
  <div id="VolunteerFillIn">
    <div class="title-box fexlDf">
      <div class="title f22 font-weight700">
        <!-- {{ isGkData }}--- -->
        {{ isGkData.graduate_time
        }}{{ isGkData.isGKB == '1' ? '志愿填报' : '志愿模拟填报' }}
      </div>
      <div class="province f14">
        {{ province.provinceName || province.province }}
      </div>
    </div>

    <!-- 新疆 -->
    <div v-if="province.xk_type == '1'">
      <el-button-group class="tabBut" v-if="isDzTypeDiff == 1">
        <div
          @click="tabBut('本科')"
          class="tabBtn"
          :class="flagTab == '本科' ? 'bg' : 'bg1'"
        >
          本科
        </div>
        <div
          @click="tabBut('专科')"
          class="tabBtn"
          :class="flagTab == '专科' ? 'bg' : 'bg1'"
        >
          专科
        </div>
      </el-button-group>
      <div class="choice-box" v-if="!isNext">
        <el-form
          label-width="80px"
          ref="xkType1FormRef"
          :rules="xkType1FormRules"
          :model="xkType1FormData"
          label-position="left"
          v-if="flagTab == '本科'"
          style="margin-top: 15px"
        >
          <el-form-item label="科类选择" prop="radio">
            <el-radio-group v-model="xkType1FormData.radio">
              <el-radio label="22">文科</el-radio>
              <el-radio label="11">理科</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="预估总分" prop="score">
            <el-input
              v-model="xkType1FormData.score"
              :placeholder="pointOut"
              :disabled="
                store.getters.user.userInfo.score_gkb != 0 &&
                store.getters.user.isGkb.isGKB == 1
              "
              maxlength="3"
              @input="handleInput(xkType1FormData.score)"
            >
              <template #suffix>
                <span>分</span>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-form
          label-width="80px"
          :model="xkType1FormData"
          ref="xkType1FormRef"
          :rules="xkType1FormRules"
          label-position="left"
          v-if="flagTab == '专科'"
          style="margin-top: 15px"
        >
          <el-form-item label="预估总分" prop="score_wx">
            <el-input
              v-model="xkType1FormData.score_wx"
              placeholder="100-450"
              :disabled="
                store.getters.user.userInfo.score_gkb != 0 &&
                store.getters.user.isGkb.isGKB == 1
              "
              maxlength="3"
              @input="handleInput_wx(xkType1FormData.score_wx)"
            >
              <template #suffix>
                <span>分</span>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="btn-box">
          <el-button class="btn" @click="handleNext">下一步</el-button>
          <div class="lighting"></div>
        </div>
      </div>
      <!-- 新疆确认填报盒子 -->
      <div class="affirm" v-else-if="isNext">
        <table class="score-table" v-if="flagTab == '本科'">
          <tbody>
            <tr class="">
              <td class="title td">科类</td>
              <td class="confirmCouseName td">
                {{ xkType1FormData.sgname }}
              </td>
            </tr>
            <tr class="score-type1">
              <td class="title td">分数</td>
              <td class="confirmTotal td">{{ xkType1FormData.score }}</td>
            </tr>
            <tr class="score-type2">
              <td class="title td">批次</td>
              <td class="confirmBatchName td">{{ xkType1FormData.batch }}</td>
            </tr>
          </tbody>
        </table>
        <table class="score-table" v-if="flagTab == '专科'">
          <tbody>
            <tr class="">
              <td class="title">语数外分数</td>
              <td class="confirmCouseName">{{ xkType1FormData.score_wx }}</td>
            </tr>
          </tbody>
        </table>
        <div class="f12" style="margin-top: 10px">
          <div style="color: rgb(117, 117, 117)" v-if="isGkData.isGKB != '1'">
            今日还可更换 <span class="number">{{ score_update }}</span> 次
          </div>
          <div
            style="color: rgb(117, 117, 117); color: red"
            v-else-if="
              (isGkData.isGKB != '1') &
              (store.getters.user.userInfo.score_gkb != 0)
            "
          >
            高考版模式下可修改
            <span class="number">{{
              store.getters.user.userInfo.score_gkb != 0 ? '0' : '1'
            }}</span>
            次
          </div>
          <div style="color: rgb(117, 117, 117)">
            成绩决定推荐结果及录取概率，请认真填写
          </div>
          <div class="btns-box df">
            <el-button
              class="btn"
              @click="handleGoBack"
              :disabled="
                store.getters.user.userInfo.score_gkb != 0 &&
                store.getters.user.isGkb.isGKB == 1
              "
              >返回修改</el-button
            >
            <el-button class="btn" @click="submit">{{
              store.getters.user.userInfo.score_gkb != 0
                ? '智能填报'
                : '确认成绩并填报'
            }}</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 北京 -->
    <div v-else-if="province.xk_type == '2'">
      <el-button-group class="tabBut" v-if="isDzTypeDiff == 1">
        <div
          @click="tabBut('本科')"
          class="tabBtn"
          :class="flagTab == '本科' ? 'bg' : 'bg1'"
        >
          本科
        </div>
        <div
          @click="tabBut('专科')"
          class="tabBtn"
          :class="flagTab == '专科' ? 'bg' : 'bg1'"
        >
          专科
        </div>
      </el-button-group>
      <div class="choice-box" v-if="!isNext">
        <el-form
          label-width="80px"
          :model="formData"
          ref="beijFormRef"
          :rules="beijRules"
          label-position="left"
          v-if="flagTab == '本科'"
          style="margin-top: 15px"
        >
          <el-form-item label="预估总分" prop="score">
            <el-input
              v-model="formData.score"
              :placeholder="pointOut"
              :disabled="
                store.getters.user.userInfo.score_gkb != 0 &&
                store.getters.user.isGkb.isGKB == 1
              "
              maxlength="3"
              @input="handleInput(formData.score)"
            >
              <template #suffix>
                <span>分</span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="选考科目" prop="checked">
            <el-checkbox-group
              v-model="formData.checked"
              :max="3"
              @change="checkedCountent"
            >
              <el-checkbox
                v-for="sub in province.pid == '33'
                  ? $const.subjectList2
                  : $const.subjectList"
                :key="sub.value"
                :value="sub.value"
              >
                {{ sub.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <el-form
          label-width="80px"
          :model="formData"
          ref="beijFormRef"
          :rules="beijRules"
          label-position="left"
          v-if="flagTab == '专科'"
          style="margin-top: 15px"
        >
          <el-form-item label="预估总分" prop="score_wx">
            <el-input
              v-model="formData.score_wx"
              placeholder="100-450"
              :disabled="
                store.getters.user.userInfo.score_gkb != 0 &&
                store.getters.user.isGkb.isGKB == 1
              "
              maxlength="3"
              @input="handleInput_wx(formData.score_wx)"
            >
              <template #suffix>
                <span>分</span>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="btn-box">
          <el-button class="btn" @click="handleNext">下一步</el-button>
          <div class="lighting"></div>
        </div>
      </div>
      <!-- 北京填报盒子 -->
      <div class="affirm" v-else-if="isNext">
        <table class="score-table" v-if="flagTab == '本科'">
          <tbody>
            <tr class="">
              <td class="title">预估分数</td>
              <td class="confirmCouseName">{{ formData.score }}</td>
            </tr>
            <tr class="score-type2">
              <td class="title">选科</td>
              <td class="confirmLineDiff">{{ alreadySelectedSubject }}</td>
            </tr>
          </tbody>
        </table>
        <table class="score-table" v-if="flagTab == '专科'">
          <tbody>
            <tr class="">
              <td class="title">语数外分数</td>
              <td class="confirmCouseName">{{ formData.score_wx }}</td>
            </tr>
          </tbody>
        </table>
        <div class="f12 beijing" style="margin-top: 30px">
          <div style="color: rgb(117, 117, 117)" v-if="isGkData.isGKB != '1'">
            今日还可更换 <span class="number">{{ score_update }}</span> 次
          </div>
          <div
            style="color: rgb(117, 117, 117); color: red"
            v-else-if="
              (isGkData.isGKB != '1') &
              (store.getters.user.userInfo.score_gkb != 0)
            "
          >
            高考版模式下可修改
            <span class="number">{{
              store.getters.user.userInfo.score_gkb != 0 ? '0' : '1'
            }}</span>
            次
          </div>
          <div style="color: rgb(117, 117, 117)">
            成绩决定推荐结果及录取概率，请认真填写
          </div>
          <div class="btns-box df">
            <el-button
              class="btn"
              @click="handleGoBack"
              :disabled="
                store.getters.user.userInfo.score_gkb != 0 &&
                store.getters.user.isGkb.isGKB == 1
              "
              >返回修改</el-button
            >
            <el-button class="btn" @click="submit">{{
              store.getters.user.userInfo.score_gkb != 0
                ? '智能填报'
                : '确认成绩并填报'
            }}</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 其他地区 四川 -->
    <div v-else-if="province.xk_type == 3">
      <div class="choice-box" v-if="!isNext">
        <el-form
          label-width="80px"
          :model="xkType3FormData"
          ref="xkType3FormRef"
          :rules="xkType3FormRules"
          label-position="left"
        >
          <el-form-item label="预估总分" prop="score">
            <el-input
              :disabled="
                store.getters.user.userInfo.score_gkb != 0 &&
                store.getters.user.isGkb.isGKB == 1
              "
              v-model="xkType3FormData.score"
              :placeholder="pointOut"
              :min="100"
              :max="750"
              maxlength="3"
              @input="handleInput(xkType3FormData.score)"
            >
              <template #suffix>
                <span>分</span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="首选科目" prop="firstChecked">
            <el-radio-group
              v-model="xkType3FormData.firstChecked"
              @change="handleRadioChange"
            >
              <el-radio :value="1">物理</el-radio>
              <el-radio :value="4">历史</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="再选科目" prop="nextChecked">
            <el-checkbox-group
              v-model="xkType3FormData.nextChecked"
              :max="2"
              @change="checkedCountent"
            >
              <el-checkbox
                v-for="sub in $const.xk_type3SubjectList"
                :key="sub.value"
                :value="sub.value"
                >{{ sub.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <div class="btn-box" style="margin-top: 0">
          <el-button class="btn" @click="handleNext">下一步</el-button>
          <div class="lighting"></div>
        </div>
      </div>
      <!-- 其他填报盒子 四川 -->
      <div class="affirm" v-if="isNext">
        <table class="score-table">
          <tbody>
            <tr class="">
              <td class="title">预估分数</td>
              <td class="confirmCouseName">{{ xkType3FormData.score }}</td>
            </tr>
            <tr class="score-type2">
              <td class="title">选科</td>
              <td class="confirmLineDiff">{{ alreadySelectedSubject }}</td>
            </tr>
          </tbody>
        </table>
        <div class="f12" style="margin-top: 30px">
          <div style="color: rgb(117, 117, 117)" v-if="isGkData.isGKB != '1'">
            今日还可更换 <span class="number">{{ score_update }}</span> 次
          </div>
          <div
            style="color: rgb(117, 117, 117); color: red"
            v-else-if="
              (isGkData.isGKB != '1') &
              (store.getters.user.userInfo.score_gkb != 0)
            "
          >
            高考版模式下可修改
            <span class="number">{{
              store.getters.user.userInfo.score_gkb != 0 ? '0' : '1'
            }}</span>
            次
          </div>
          <div style="color: rgb(117, 117, 117)">
            成绩决定推荐结果及录取概率，请认真填写
          </div>
          <div class="btns-box df">
            <el-button
              class="btn"
              @click="handleGoBack"
              :disabled="
                store.getters.user.userInfo.score_gkb != 0 &&
                store.getters.user.isGkb.isGKB == 1
              "
              >返回修改</el-button
            >
            <el-button class="btn" @click="submit">{{
              store.getters.user.userInfo.score_gkb != 0
                ? '智能填报'
                : '确认成绩并填报'
            }}</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  ref,
  reactive,
  watch,
  getCurrentInstance,
  watchEffect,
  computed,
} from 'vue';
import { getToken } from '@/utils/auth';
import { useStore } from 'vuex';
import { EditUser } from '@/api/user';
import router from '@/router';
const { proxy } = getCurrentInstance();
const store = useStore();
const provinceData = computed(
  () => JSON.parse(localStorage.getItem('provinceList')) || [],
);
const isDzTypeDiff = ref('');
const xkType1FormRef = ref(null);
const isToken = ref('');
const isNext = ref(false);
const alreadySelectedSubject = ref('');
const beijFormRef = ref(null);
const xkType3FormRef = ref(null);
const reqData = ref({});
const resultSgid = ref(null);
const isGkData = ref({});
const provinceId = ref(store.getters.user.userInfo.pid);
const subjectList = ref(
  provinceId.value == '33'
    ? proxy.$const.subjectList2
    : proxy.$const.subjectList,
);

const validateScoreLength = (val, callback, fn) => {
  if (val < 100) {
    fn(new Error('请输入正确的分数'));
  } else if (val > 750) {
    fn(new Error('请输入正确的分数'));
  } else {
    fn();
  }
};

const validateCheckLength = (val, callback, fn) => {
  if (val.length < 3) {
    fn(new Error('请将科目选择完整'));
  } else {
    fn();
  }
};
const validateNextCheckLength = (val, callback, fn) => {
  if (val.length < 2) {
    fn(new Error('请将科目选择完整'));
  } else {
    fn(); // 调用回调，没有错误时调用无参数
  }
};
const flagTab = ref('本科'); //控制tab切换
//tab 切换
const tabBut = (e) => {
  flagTab.value = e;
};
// 只允许输入数字
const handleInput = (score) => {
  formData.value.score = score.replace(/[^\d]/g, '');
  xkType1FormData.value.score = score.replace(/[^\d]/g, '');
  xkType3FormData.value.score = score.replace(/[^\d]/g, '');
};
const handleInput_wx = (score) => {
  formData.value.score_wx = score.replace(/[^\d]/g, '');
  xkType1FormData.value.score_wx = score.replace(/[^\d]/g, '');
};

// 判断省份
const example = ref(null); //判断个别省份总分
const pointOut = ref('分数区间 100-750');
const getisDzTypeDiff = () => {
  if (store.getters.user.userInfo.pid == '46') {
    example.value = 46;
    pointOut.value = '分数区间 100-900';
  } else if (store.getters.user.userInfo.pid == '31') {
    example.value = 31;
    pointOut.value = '分数区间 100-660';
  }
  if (store.getters.user.userInfo?.pid && provinceData.value.length > 0) {
    isDzTypeDiff.value = provinceData.value.filter(
      (i) => i.id == store.getters.user.userInfo.pid,
    )[0].isDzTypeDiff;
  } else {
    isDzTypeDiff.value = 0;
  }
};
getisDzTypeDiff();
//北京
const beijRules = reactive({
  score: [
    { required: true, message: '请输入分数', trigger: 'blur' },
    { required: true, validator: validateScoreLength, trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (example.value == 46) {
          if (value < 100 || value > 900) {
            callback(new Error('分数区间 100-900'));
          } else {
            callback();
          }
        } else if (example.value == 31) {
          if (value < 100 || value > 660) {
            callback(new Error('分数区间 100-660'));
          } else {
            callback();
          }
        } else {
          if (value < 100 || value > 750) {
            callback(new Error('分数区间 100-750'));
          } else {
            callback();
          }
        }
      },
      trigger: 'blur',
    },
  ],
  score_wx: [
    { required: true, message: '请输入分数', trigger: 'blur' },
    { required: true, validator: validateScoreLength, trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value < 100 || value > 450) {
          callback(new Error('分数区间 100-450'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },
  ],
  checked: [
    {
      required: true,
      message: '请选择科目',
      trigger: 'change',
    },
    { required: true, validator: validateCheckLength, trigger: 'blur' },
  ],
});
//四川
const xkType1FormRules = reactive({
  score: [
    { required: true, message: '请输入分数', trigger: 'blur' },
    { required: true, validator: validateScoreLength, trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (example.value == 46) {
          if (value < 100 || value > 900) {
            callback(new Error('分数区间 100-900'));
          } else {
            callback();
          }
        } else if (example.value == 31) {
          if (value < 100 || value > 660) {
            callback(new Error('分数区间 100-660'));
          } else {
            callback();
          }
        } else {
          if (value < 100 || value > 750) {
            callback(new Error('分数区间 100-750'));
          } else {
            callback();
          }
        }
      },
      trigger: 'blur',
    },
  ],
  radio: [
    {
      required: true,
      message: '请选择科类',
      trigger: 'change',
    },
  ],
});
// 其他地区
const xkType3FormRules = reactive({
  score: [
    { required: true, message: '请输入分数', trigger: 'blur' },
    { required: true, validator: validateScoreLength, trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (example.value == 46) {
          if (value < 100 || value > 900) {
            callback(new Error('分数区间 100-900'));
          } else {
            callback();
          }
        } else if (example.value == 31) {
          if (value < 100 || value > 660) {
            callback(new Error('分数区间 100-660'));
          } else {
            callback();
          }
        } else {
          if (value < 100 || value > 750) {
            callback(new Error('分数区间 100-750'));
          } else {
            callback();
          }
        }
      },
      trigger: 'blur',
    },
  ],
  firstChecked: [
    { required: true, message: '请选择首选科目', trigger: 'blur' },
  ],
  nextChecked: [
    { required: true, message: '请选择再选科目', trigger: 'change' },
    { required: true, validator: validateNextCheckLength, trigger: 'change' },
  ],
});

const score_update = store.getters.user.userInfo.score_update;
//北京表单
const formData = ref({
  score: store.getters.user.userInfo.score,
  choiceRadio: '',
  batch: '',
  checked: [],
  score_wx: store.getters.user.userInfo.score_wx || '',
});

// 新疆表单
const xkType1FormData = ref({
  score: store.getters.user.userInfo.score,
  radio: store.getters.user.userInfo.sgid,
  batch: store.getters.user.userInfo.batch,
  sgname: store.getters.user.userInfo.sgname,
  score_wx: store.getters.user.userInfo.score_wx,
});
//其他表单 四川
const xkType3FormData = ref({
  score: store.getters.user.userInfo.score,
  firstChecked: store.getters.user.userInfo.sgid?.split(',')[0] * 1 || '',
  nextChecked: [],
});
const province = ref({});

watch(
  () => store.getters.user.isGkb,
  (newVal) => {
    isGkData.value = newVal;
    if (isGkData.value.isGKB == '1' && getToken()) {
      ElMessage({
        message: '当前是高考版',
        type: 'warning',
      });
    }
  },
);
watchEffect(() => {
  isToken.value = store.getters.user.token;
  if (store.getters.user.userInfo.province) {
    let reultSgid = store.getters.user.userInfo.sgid.split(',');
    let filterValues =
      subjectList.value
        .filter((item) => reultSgid.includes(String(item.value)))
        .map((item) => item.value) || [];
    formData.value.checked = filterValues;

    let filter3Values =
      proxy.$const.xk_type3SubjectList
        .filter((item) => reultSgid.includes(String(item.value)))
        .map((item) => item.value) || [];
    xkType3FormData.value.nextChecked = filter3Values;

    let filterLabel =
      subjectList.value
        .filter((item) => reultSgid.includes(String(item.value)))
        .map((item) => item.label) || [];
    formData.value.checked = filterValues;
    alreadySelectedSubject.value = filterLabel.join(',');
    // isNext.value = true;
  }

  if (
    store.getters.user.userInfo.province &&
    store.getters.user.userInfo.score != 0
  ) {
    isNext.value = true;
  } else {
    isNext.value = false;
  }
  if (!isToken.value) {
    province.value = store.getters.province.provinceData;
  } else {
    province.value = store.getters.user.userInfo;
  }
});

watch(province.value, () => {
  handleGoBack();
});

const checkedCountent = () => {};
const handleRadioChange = () => {};
// 下一步
const handleNext = () => {
  if (!getToken()) {
    router.push('/login');
  } else if (province.value.xk_type == 1) {
    xkType1FormRef.value.validate((valid) => {
      if (valid) {
        let resultSub = proxy.$const.ZJSubjectList.filter(
          (v) => v.value == xkType1FormData.value.radio,
        );
        xkType1FormData.value.sgname = resultSub[0].label;
        isNext.value = true;
      }
    });
  } else {
    if (province.value.xk_type == 2) {
      // if (!formEl) return;
      beijFormRef.value.validate((valid) => {
        if (valid) {
          let filterLabel =
            subjectList.value
              .filter((item) => formData.value.checked.includes(item.value))
              .map((item) => item.label) || [];
          alreadySelectedSubject.value = filterLabel.join(',');
          isNext.value = true;
        }
      });
    } else if (province.value.xk_type == 3) {
      xkType3FormRef.value.validate((valid) => {
        if (valid) {
          let result = [
            xkType3FormData.value.firstChecked * 1,
            ...xkType3FormData.value.nextChecked,
          ];

          let filterLabel =
            proxy.$const.xk_type3FifstSubjectList
              .filter((item) => result.includes(item.value))
              .map((item) => item.label) || [];

          alreadySelectedSubject.value = filterLabel.join(',');
          isNext.value = true;
        }
      });
    }
  }
};

const handleGoBack = () => {
  isNext.value = false;
};

function submit() {
  if (province.value.xk_type == '1') {
    reqData.value.pid = store.getters.user.userInfo.pid;
    reqData.value.sgid = xkType1FormData.value.radio;
    reqData.value.score = xkType1FormData.value.score;
    reqData.value.score_wx = xkType1FormData.value.score_wx;
    // reqData.value.grade = store.getters.user.userInfo.grade;
  } else if (province.value.xk_type == '2') {
    if (flagTab.value == '本科') {
      reqData.value.pid = store.getters.user.userInfo.pid;
      reqData.value.sgid = formData.value.checked.join(',');
      reqData.value.score = formData.value.score;
    } else {
      reqData.value.score_wx = formData.value.score_wx;
    }
    // reqData.value.grade = store.getters.user.userInfo.grade;
    resultSgid.value = formData.value.checked.join(',');
  } else if (province.value.xk_type == '3') {
    reqData.value.pid = store.getters.user.userInfo.pid;
    reqData.value.sgid = [
      xkType3FormData.value.firstChecked,
      ...xkType3FormData.value.nextChecked,
    ].join(',');
    reqData.value.score = xkType3FormData.value.score;
    // reqData.value.grade = store.getters.user.userInfo.grade;
  }
  if (
    reqData.value.score == store.getters.user.userInfo.score &&
    reqData.value.sgid == store.getters.user.userInfo.sgid
  ) {
    handleRouterChange();
  } else if (isGkData.value.isGKB == '1') {
    ElMessageBox.confirm('当前是高考版，成绩只能修改一次，确认修改?', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        handleEditUser();
      })
      .catch(() => {});
  } else {
    handleEditUser();
  }
}

const handleEditUser = () => {
  EditUser(reqData.value).then((res) => {
    if (res.data.code == 20000) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
      handleRouterChange();
    } else {
      ElMessage({
        message: res.data.msg,
        type: 'error',
      });
    }
  });
};
const handleRouterChange = () => {
  router.push({
    path: '/batchInfo',
  });
};
</script>

<style lang="scss" scoped>
#VolunteerFillIn {
  // overflow: auto;
  position: absolute;
  top: 15px;
  right: 0%;
  width: 340px;
  height: 300px;
  background: #f7f7f7;
  border-radius: 8px;
  padding: 24px 20px 20px;

  // /* 隐藏滚动条 */
  // scrollbar-width: none;
  // /* Firefox */
  // -ms-overflow-style: none;

  // /* IE 10+ */
  // ::-webkit-scrollbar {
  //   display: none;
  //   /* Chrome, Safari, Opera */
  // }

  .title-box {
    .province {
      color: #757575;
    }
  }

  .btn-box {
    // margin-top: 25px;
    // position: absolute;
    bottom: 10px;
  }

  .lighting {
    width: 30px;
    height: 74px;
    position: relative;
    top: -55px;
    left: -80px;
    transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -webkit-animation: lighting 1.2s linear infinite forwards;
    -moz-animation: lighting 1.2s linear infinite forwards;
    animation: lighting 1.2s linear infinite forwards;
    background: rgba(255, 255, 255, 0.4);
    z-index: 1;
  }

  @keyframes lighting {
    from {
      left: -10px;
      /* 起始位置 */
    }

    to {
      left: calc(100% - 20px);
      /* 结束位置，需根据实际情况调整偏移量 */
    }
  }

  .affirm {
    height: 168px;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .score-table {
    width: 100%;
    color: #333;
    font-size: 16px;
    list-style-type: none;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
    margin: 0;

    .title {
      width: 80px;
    }
  }

  .score-table td {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .score-table .td {
    height: 32px;
    line-height: 32px;
  }
  table td {
    border: 1px solid #e6e6e6;
  }

  table tr:nth-child(odd) {
    background: #f2f2f2;
  }

  .hide {
    display: none;
  }

  .btn {
    height: 40px;
    width: 100%;
    background-color: var(--background-color);
    color: var(--text-color);
  }

  .number {
    color: var(--color-text);
  }

  .el-checkbox {
    margin-right: 14px;
  }
}
.tabBut {
  display: flex;
  background-color: #ebeff4;
  border-radius: 10px 10px 0 0;
  .tabBtn {
    width: 150px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
  }
  .bg {
    background-color: #ffffff;
    border-radius: 10px 10px 0 0;
    color: #2d92f9;
  }
  .bg1 {
    background-color: #ebeff4;
    border-radius: 10px 10px 0 0;
  }
}
.beijing {
  position: absolute;
  bottom: 10px;
  width: 88%;
}
</style>
